<template>
    <div class="fundFlowDialog"  @mouseover="stopAutoRefresh" @mouseleave="startAutoRefresh">
      <div class="table" id="fundFlowTable">
          <div class="echart" id="mychart" :style="myChartStyle"></div>
      </div>
      <div class="desc">
        <div class="desc_text" style="width: 100px;margin-left: 20px;">成交净买额</div>
        <div class="desc_text" :style="{ width: '120px',color: ray1 < 0 ? '  red' : 'white' }" >{{ ray1 }}亿元</div>
        <div class="desc_text" :style="{ width: '120px', color: ray2 < 0 ? 'red' : 'white' }" >{{ray2}}亿元</div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  
  export default {
    name: 'fundFlows',
    data() {
      return {
        intervalId: null, // 用于保存定时器ID
        ray1:0,
        ray2:'',
        test: [],
        scffName: [],
        scffBalance: [],
        xData: ["demo1", "demo2"], // 横坐标
        yData: ["150亿", "300亿", "450亿", "600亿"], // 数据
        max: ["100%", "100%"],
        myChartStyle: {
          width: "100%",
          height: "200px"
        } // 图表样式
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      async loadData() {
        try {
          const res = await axios.get('http://127.0.0.1:8080/flows');
          this.test = res.data.data;
          this.scffBalance = this.test.map(item => parseFloat(item.scffBalance.replace('亿元', '')));
          this.scffName = [this.test[0].scffName, this.test[1].scffName];
          console.log('4.4')
          console.log(res.data.data)
                    // 假设 this.test[0].scffNetPurchases 的值为 "100亿元"
            const value = this.test[0].scffNetPurchases;
            const matches = value.match(/-?\d+(\.\d+)?/);


            if (matches) {
                this.ray1 = parseFloat(matches[0]); // 将提取到的数字转换为浮点数
            } else {
                // 如果没有匹配到数字，则赋值为0或者其他默认值
                this.ray1 = 0;
            }
            const value1 = this.test[1].scffNetPurchases;
            const matches1 = value1.match(/-?\d+(\.\d+)?/);

            if (matches1) {
                this.ray2 = parseFloat(matches1[0]); // 将提取到的数字转换为浮点数
            } else {
                // 如果没有匹配到数字，则赋值为0或者其他默认值
                this.ray2 = 0;
            }

          //this.ray1=this.test[0].scffNetPurchases
          //this.ray2=this.test[1].scffNetPurchases
          console.log(this.ray1)
          console.log(this.ray2)
          this.initEcharts();
        } catch (err) {
          console.log("错误", err);
        }
      },
      initEcharts() {
        const maxBalance = Math.max(...this.scffBalance);
        // 增加一个固定值来调整y轴的最大值
        const maxAdjusted = maxBalance + 100;

        const option = {
          xAxis: [{
            data: this.scffName,
            type: 'category',
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              interval: 0,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                width: 1.5 // 坐标线的宽度
              },
            },
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
          type: 'value',
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          

          axisLabel: {
            formatter: '{value} 亿', // 格式化y轴标签，添加单位
            },

          axisLine: {
              lineStyle: {
                type: 'solid',
                width: 1.5 // 坐标线的宽度
              },
            },
          splitLine: {
              show: false,
            },
            axisLine: {
            show: true, // 显示y轴坐标线
            lineStyle: {
                
                width: 2       // 设置坐标线的宽度
            }
            },
          }],
          
          min: 0,
          max: Math.ceil(maxAdjusted / 150) * 150, // 设置y轴最大值为最接近最大值的150的倍数
          interval: Math.ceil(maxAdjusted / 4 / 150) * 150, // 根据最大值设置y轴间隔
          
          series: [{
          itemStyle: {
            normal: {
              color: '#7ca9fc'
            }
          },
          type: "bar",
          data: this.scffBalance, // 正式的数据
          barWidth: 15,
        }],
          tooltip: {
            show: true,
            textStyle: {
              color: "#000000",
              fontStyle: "normal",
              fontSize: 14,
              align: "left",
            },
            formatter: function(param) {
              return `${param.name}<br />当日资金余额：${param.data}<br />当日资金限额：`;
            },
          },
        };
        const myChart = echarts.init(document.getElementById("mychart"));
        myChart.setOption(option);
        // 随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
        
      
    }
    
  }
  </script>
  


  
  <style scoped>
  .fundFlowDialog {
    width: 100%;
    height: 100%;
    font-size: small;
    position: relative;
  }
  
  .table {
    width: 100%;
    height: calc(100% - 62px);
  }
  
  .desc {
    width: 80%;
    height: 30px;
    display: flex;
    justify-content: space-between;
  }
  
  .desc_text {
    height: 100%;
    background-color: #fdfdfd1b;
    margin-top: 5px;
    text-align: center;
    padding: 2px;
    color: white;
  }
  </style>
    